@import './variables.scss';

.fa-modal-search {
  width: 300px;
  position: absolute;
  right: 15px;
  z-index: 100;
  .el-input__inner {
    height: 36px;
  }
}
.fa-product {
  width: 100%;
  height: 545px;
  .product-left {
    width: 135px;
    height: 100%;
    float: left;
    border: 1px solid #C0CCDA;
    .product-name-list {
      width: 97px;
      height: 25px;
      line-height: 25px;
      margin: 9px 18px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
      span {
        cursor: pointer;
        color: #99A9BF;
      }
      span:hover {
        color: #4ADEEC;
      }
    }
    .name-list-active {
      span {
        color: #43CAD7;
      }
    }
  }
  .product-right{
    float: right;
    width: 720px;
    height: 100%;
    .product-notes {
      line-height: 30px;
      margin: 0px;
    }
  }
  .product-img-box {
    width: 164px;
    height: 158px;
    border: 1px solid #C0CCDA;
    float: left;
    margin-bottom: 20px;
    margin-right: 21px;
    cursor: pointer;
    i {
      position: absolute;
      cursor: pointer;
      z-index: 20;
      margin: -30px 0px 0px 133px;
    }
    .product-img-name {
      width: 100%;
      text-align: center;
      line-height: 28px;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow:ellipsis;
    }
    .item-total-picture {
      width: 22px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      background: #C4C4C4;
      position: absolute;
      cursor: pointer;
      margin: -128px 0px 0px 140px;
    }
  }
  .product-img-box:nth-child(4n+1) {
    margin-right: 0px;
  }
  .product-img-box:nth-child(n+9) {
    margin-bottom: 0px;
  }
  .product-img{
    width: 100%;
    height: 128px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .product-img-upload {
    float: left;
    margin: 150px 0 0 311px;
  }
  .product-img-tips {
    float: left;
    margin: 19px 0 0 248px;
  }
}

